<template>
  <div ref="container" class="container">
    <div style="width: 210mm;font-size: 13px">
      <h2 style="text-align: center">{{ seller.name }}交班明细表</h2>
      <!-- {{ roomListData.length }}-{{ payListData.length }}<br> -->
      <div>
        <span>{{ `当班：${startTime}\t至\t${endTime}\t交接模式：权责发生制\t班次：${shiftoverType ? shiftoverType.filter(item=>item.id == handType)[0].label : ''}` }}</span>
        <br>
        <span>{{ `操作员：${username}\t打印人：${username}` }}</span>
      </div>

      <table border="1" cellspacing="0" cellpadding="0" style="width: 100%;border: 0.2px solid;margin-top: 3px">
        <thead>
          <tr><th colspan="6" align="left" style="font-size: 15px">收款</th></tr>
        </thead>

        <template v-for="(itemPr, index) in Object.keys(soukuanList)">
          <tbody v-if="soukuanList[itemPr] && soukuanList[itemPr].length >= 1" :key="index + '|'">
            <tr><th colspan="6" align="left">{{ itemPr }}</th></tr>
            <tr>
              <td>房间号</td>
              <td>项目名</td>
              <td>金额</td>
              <td>发生时间</td>
              <td>单据号</td>
              <td>备注</td>
            </tr>
            
            <tr v-for="(item, index) in soukuanList[itemPr]" :key="index">
              <td><span>{{ item.banks || '--' }}</span></td>
              <td>
                <span v-if="getPayType(item.payType)[0] == '红冲'">{{ item.agreementId ? '协议单位红冲' : '客房红冲' }}</span>
                <span v-else-if="getPayType(item.payType)[0] == '优惠金额'">{{ item.posid ? 'POS优惠' : '结账优惠' }}</span>
                <span v-else>{{ getPayType(item.payType)[0] }}</span>
              </td>
              <td><span>{{ getPayType(item.payType)[2] + item.payPrice }}</span></td>
              <td><span>{{ item.creatTime || '--' }}</span></td>
              <td>
                <span v-if="item.payType == 0 || item.payType == 5 || item.payType == 3 || item.payType == 8">{{ item.ruSysNo }}</span>
                <span v-else-if="item.payType == 4 || item.payType == 2">{{ item.sysNo }}</span>
                <span v-else-if="item.payType == 7 || item.payType == 6">{{ item.sysOrderNum }}</span>
              </td>
              <td><span>{{ item.remarks || '--' }}</span></td>
            </tr>

            <tr><td colspan="6" align="left" @click="zflx">{{ itemPr }}合计：{{ soukuanList[`${itemPr}Count`] }}</td></tr>
          </tbody>
        </template>

        <thead>
          <tr><th colspan="6" align="left" style="font-size: 15px">收款合计：{{ soukuanList.count }}</th></tr>
        </thead>
      </table>
      
      <table border="1" cellspacing="0" cellpadding="0" style="width: 100%;border: 0.2px solid;margin-top: 3px">
        <thead>
          <tr><th colspan="6" align="left" style="font-size: 15px">退款</th></tr>
        </thead>

        <template v-for="(itemPr, index) in Object.keys(tuikuanList)">
          <tbody v-if="tuikuanList[itemPr] && tuikuanList[itemPr].length >= 1" :key="index + '|'">
            <tr><th colspan="6" align="left">{{ itemPr }}</th></tr>
            <tr>
              <td>房间号</td>
              <td>费用类型</td>
              <td>金额</td>
              <td>发生时间</td>
              <td>单据号</td>
              <td>备注</td>
            </tr>
            
            <tr v-for="(item, index) in tuikuanList[itemPr]" :key="index">
              <td><span>{{ item.banks || '--' }}</span></td>
              <td>
                <span v-if="getPayType(item.payType)[0] == '红冲'">{{ item.agreementId ? '协议单位红冲' : '客房红冲' }}</span>
                <span v-else-if="getPayType(item.payType)[0] == '优惠金额'">{{ item.posid ? 'POS优惠' : '结账优惠' }}</span>
                <span v-else>{{ getPayType(item.payType)[0] }}</span>
              </td>
              <td><span>{{ getPayType(item.payType)[2] + item.payPrice }}</span></td>
              <td><span>{{ item.creatTime || '--' }}</span></td>
              <td>
                <span v-if="item.payType == 0 || item.payType == 5 || item.payType == 3 || item.payType == 8">{{ item.ruSysNo }}</span>
                <span v-else-if="item.payType == 4 || item.payType == 2">{{ item.sysNo }}</span>
                <span v-else-if="item.payType == 7 || item.payType == 6">{{ item.sysOrderNum }}</span>
              </td>
              <td><span>{{ item.remarks || '--' }}</span></td>
            </tr>

            <tr><td colspan="6" align="left" @click="zflx">{{ itemPr }}合计：-{{ tuikuanList[itemPr + 'Count'] }}</td></tr>
          </tbody>
        </template>

        <thead>
          <tr><th colspan="6" align="left" style="font-size: 15px">退款合计：-{{ tuikuanList.count }}</th></tr>
        </thead>
      </table>

      <table border="1" cellspacing="0" cellpadding="0" style="width: 100%;border: 0.2px solid;margin-top: 3px">
        <tbody>
          <tr><th :colspan="4" align="left">收支明细</th></tr>
          <tr v-for="i in Math.ceil(zflx.length / 4)" :key="i">
            <td v-for="item in pageInfo(i - 1)" :key="item" style="width: 25%">
              <span v-if="item">{{ item }}：{{ countMap[item] || 0 }} 元</span>
              <span v-else>&nbsp;</span>
            </td>
          </tr>
        </tbody>
      </table>

      <table v-if="fyPrint" border="1" cellspacing="0" cellpadding="0" style="width: 100%;border: 0.2px solid;margin-top: 3px">
        <tbody>
          <tr>
            <td>房间号</td>
            <td>费用类型</td>
            <td>金额</td>
            <td>发生时间</td>
            <td>单据号</td>
            <td>备注</td>
          </tr>
          
          <tr v-for="(item, index) in roomListData" :key="index">
            <td><span>{{ item.banks || '--' }}</span></td>
            <td><span>{{ getPayType(item.payType)[0] || '--' }}</span></td>
            <td><span>{{ getPayType(item.payType)[2] + item.payPrice }}</span></td>
            <td><span>{{ item.creatTime || '--' }}</span></td>
            <td>
              <span v-if="item.payType == 0 || item.payType == 5 || item.payType == 3 || item.payType == 8">{{ item.ruSysNo }}</span>
              <span v-else-if="item.payType == 4 || item.payType == 2">{{ item.sysNo }}</span>
              <span v-else-if="item.payType == 7 || item.payType == 6">{{ item.sysOrderNum }}</span>
              <span v-else>{{ item.billNo }}</span>
            </td>
            <td><span>{{ item.remarks || '--' }}</span></td>
          </tr>

          <tr><td colspan="6" align="left">费用合计：{{ dataMap['和'] }}</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import Moment from 'moment'

import { getLodop } from '@/utils/lodop'

export default {
  props: [
    'seller',
    'startTime', 'endTime', 'handType', 'shiftoverType',
    'username',
    'fyPrint',

    'dataMap', 'countMap'
  ],
  data() {
    return {
      printConfig: {},

      payTypeMap: [
        { key: 0, value: ['预收款账', 'success', '', 'ruSysNo'] },
        { key: 1, value: ['信用卡授权', 'success', '', 'ruSysNo'] },
        { key: 2, value: ['消费', 'success', '', 'ruSysNo'] },
        { key: 3, value: ['押金收款', 'success', '', 'ruSysNo'] },
        { key: 4, value: ['房费', 'success', '', 'ruSysNo'] },
        { key: 5, value: ['预收退款', 'danger', '-', 'refundNo'] },
        { key: 6, value: ['结账收款', 'success', '', 'ruSysNo'] },
        { key: 7, value: ['结账退款', 'danger', '-', 'refundNo'] },
        { key: 8, value: ['押金退款', 'danger', '-', 'refundNo'] },
        { key: 9, value: ['红冲', 'danger', '-', 'refundNo'] },
        { key: 13, value: ['优惠金额', 'danger', '-', 'refundNo'] },

        { key: 20, value: ['POS', 'success', '', 'ruSysNo'] },
        { key: 21, value: ['非住客帐', 'success', '', 'ruSysNo'] },
        { key: 22, value: ['商品退货', 'danger', '-', 'refundNo'] },

        { key: -1, value: ['', 'success', '', 'ruSysNo'] }
      ],
      roomListData: [],
      payListData: [],

      zflx: [],
      soukuanList: { count: 0 },
      tuikuanList: { count: 0 }
    }
  },
  created() {
    this.getPrintMsg()
  },
  methods: {
    async getPrintMsg() {
      await this.$http({
        url: this.$http.adornUrl(`/hotel/thotelprinttemplate/info/11`),
        method: 'get'
      }).then(({data}) => {
        if (data && data.code === 0) { this.printConfig = data.tHotelPrintTemplate }
      })
    },
    async init() {
      // 初始化填充数据
      this.roomListData = await this.loadData('roomListData')
      this.payListData = await this.loadData('payListData')

      this.zflx = []
      this.tuikuanList = { count: 0 }
      this.soukuanList = { count: 0 }

      for (var item in this.countMap) {
        var a = `${item}Count`

        if (item != '和') {
          this.zflx.push(item)

          this.tuikuanList[a] = 0
          this.tuikuanList[item] = []
          this.soukuanList[a] = 0
          this.soukuanList[item] = []
        }
      }

      this.zflx.forEach(item => {
        var a = `${item}Count`

        this.payListData.forEach(item2 => {
          if (item == item2.consumeInfo) {
            if (this.getPayType(item2.payType)[2]) {
              this.tuikuanList[a] += item2.payPrice * 1
              this.tuikuanList[item].push(item2)
            } else {
              this.soukuanList[a] += item2.payPrice * 1
              this.soukuanList[item].push(item2)
            }
          }
        })

        this.tuikuanList.count += this.tuikuanList[a]
        this.soukuanList.count += this.soukuanList[a]
      })

      await this.print2()
    },
    async loadData(param) {
      let tableData
      await this.$http({
        url: this.$http.adornUrl('/hotel/thotelfloorroomcheckinaccounting/getByTypeAndTimeWithShiftWork2'),
        method: 'get',
        params: this.$http.adornParams({
          sill: param,
          page: 0,
          limit: 99999,
          startTime: this.startTime,
          endTime: this.endTime
        })
      }).then(({data}) => {
        if (data && data.code === 0) { tableData = data.page.records }
      })

      if (param === 'roomListData') {
        await this.$http({
          url: this.$http.adornUrl('/hotel/thotelcashbills/listByTimeRangeWithShiftWork'),
          method: 'get',
          params: this.$http.adornParams({
            page: 0,
            limit: 99999,
            startTime: this.startTime,
            endTime: this.endTime
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            data.page.list.forEach(item => {
              const datt = {
                banks: '',
                payType: 20,
                payPrice: item.consumeMoney,
                creatTime: item.createTime,
                billNo: item.billNo,
                remarks: item.note
              }

              tableData.push(datt)
            })
          }
        })
        await this.$http({
          url: this.$http.adornUrl('/hotel/nonroominout/list'),
          method: 'get',
          params: this.$http.adornParams({
            page: 0,
            limit: 99999,
            key: '',
            start_time: this.startTime,
            end_time: this.endTime
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            data.page.list.forEach(item => {
              const datt = {
                banks: item.banks,
                payType: 21,
                payPrice: item.payCount,
                creatTime: item.createTime,
                billNo: '',
                remarks: item.notes
              }

              tableData.push(datt)
            })
          }
        })
        await this.$http({
          url: this.$http.adornUrl('/hotel/thotelfloorroomshoprecord/list'),
          method: 'get',
          params: this.$http.adornParams({
            page: 0,
            limit: 99999,
            type: 2,
            startTime: this.startTime,
            endTime: this.endTime
          })
        }).then(({data}) => {
            data.page.list.forEach(item => {
              const datt = {
                banks: '',
                payType: 22,
                payPrice: item.buyNumber * item.shopPrice,
                creatTime: item.creatTime,
                billNo: '',
                remarks: item.remarks
              }

              tableData.push(datt)
            })
        })
      }
      return tableData || []
    },

    print2() {
      this.createOneFormPage2()

      LODOP.SET_PRINT_COPIES(this.printConfig.printSum)
      if (this.printConfig.preview) {
        if (LODOP.SET_PRINTER_INDEXA(this.printConfig.defaultPrint)) {
          LODOP.SET_PRINTER_INDEXA(this.printConfig.defaultPrint)
          this.$nextTick(() => { LODOP.PRINT() })
        } else {
          LODOP.SET_PRINTER_INDEXA(0)
          this.$nextTick(() => { LODOP.PRINT() })
        }
      } else {
        if (LODOP.SET_PRINTER_INDEXA(this.printConfig.defaultPrint)) {
          LODOP.SET_PRINTER_INDEXA(this.printConfig.defaultPrint)
          this.$nextTick(() => { LODOP.PREVIEW() })
        } else {
          LODOP.SET_PRINTER_INDEXA(0)
          this.$nextTick(() => { LODOP.PREVIEW() })
        }
      }
      console.log(LODOP.SET_PRINTER_INDEXA(this.printConfig.defaultPrint))
    },
    createOneFormPage2() {
      LODOP = getLodop()
      if (!LODOP) {
        this.$alert(
          '<br>'
          + '<font color="#FF00FF">'
          + 'CLodop云打印服务(localhost本地)未安装启动!点击这里<a href="http://www.lodop.net/download/CLodop_Setup_for_Win32NT_4.088Extend.zip" download target="_self">执行安装</a>,安装后请刷新页面。'
          + '</font>', '安装', {
            confirmButtonText: '确定',
            dangerouslyUseHTMLString: true
          }
        )

        return
      }
      
      //样式
      var body = ''
      var olstyle1 = '<!DOCTYPE html>'
                      + '<html lang="zh-CN">'
                      + `<head>${''}</head>`
                      + '<style>div { border: 0 !important }</style>'

      var olstyle2 = `<style>.print-wrap-normal { width: ${(210 + parseInt(this.printConfig.printContentOffset))}mm !important}</style>`
      this.$nextTick(() => {
        body = olstyle1 + olstyle2 + '<body>' + this.$refs.container.innerHTML + '</body>' + '</html>'

        LODOP.ADD_PRINT_HTM(0, this.printConfig.printPaperOffset, 1000, 2000, body) // 填充超文本
      })
      LODOP.SET_PRINT_PAGESIZE(0, '210mm', 2000, '') // 设定纸张大小

      LODOP.SET_PRINT_STYLE('Bold', 1) // 设置对象风格
      LODOP.SET_PRINT_STYLE('FontSize', 12) // 设置对象风格
      LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 0, 0, '') // 设置窗口
      LODOP.SET_PRINT_MODE('PRINT_PAGE_PERCENT', '100%') // 设置缩放
      LODOP.SET_PRINT_COPIES(this.printConfig.printSum) // 设置打印次数
    },

    getPayType(val) {
      let data
      this.payTypeMap.forEach(item => {
        if (item.key === val) { data = item.value }
      })
      return data || ''
    },
    pageInfo(page) {
      var data = []

      const size = 4
      for (var i = page * size; i < (page + 1) * size; i++) {
        data.push(this.zflx[i] || null)
      }
      return data
    },

    yulan() {
      this.payListData = [
        {
          banks: '--',
          payType: 2,
          payPrice: 0,
          creatTime: this.now(),
          billNo: '--',
          remarks: '--',
          consumeInfo: '现金'
        },
        {
          banks: '--',
          payType: 7,
          payPrice: 0,
          creatTime: this.now(),
          billNo: '--',
          remarks: '--',
          consumeInfo: '现金'
        },
        {
          banks: '--',
          payType: 2,
          payPrice: 0,
          creatTime: this.now(),
          billNo: '--',
          remarks: '--',
          consumeInfo: '银行卡'
        }
      ]
      this.roomListData = [
        {
          banks: '--',
          payType: -1,
          payPrice: 0,
          creatTime: this.now(),
          billNo: '--',
          remarks: '--'
        }
      ]

      this.zflx = []
      this.tuikuanList = { count: 0 }
      this.soukuanList = { count: 0 }

      for (var item in this.countMap) {
        var a = `${item}Count`

        this.zflx.push(item)

        this.tuikuanList[a] = 0
        this.tuikuanList[item] = []
        this.soukuanList[a] = 0
        this.soukuanList[item] = []
      }

      this.zflx.forEach(item => {
        this.payListData.forEach(item2 => {
          if (item == item2.consumeInfo) {
            if (this.getPayType(item2.payType)[2]) {
              this.tuikuanList[item].push(item2)
            } else {
              this.soukuanList[item].push(item2)
            }
          }
        })
      })
    },
    now() {
      return Moment().locale('zh-cn').format('YYYY-MM-DD HH:mm:ss');
    }
  }
}
</script>
